<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <div class="employee-management">
      <div class="rectangle-9436"></div>
      <div class="rectangle-9438"></div>
      <svg
        class="chat-1"
        width="28"
        height="32"
        viewBox="0 0 28 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M9.33333 13.3333H9.345H9.33333ZM14 13.3333H14.0117H14ZM18.6667 13.3333H18.6783H18.6667ZM10.5 21.3333H5.83333C5.21449 21.3333 4.621 21.0524 4.18342 20.5523C3.74583 20.0522 3.5 19.3739 3.5 18.6666V7.99998C3.5 7.29274 3.74583 6.61446 4.18342 6.11436C4.621 5.61426 5.21449 5.33331 5.83333 5.33331H22.1667C22.7855 5.33331 23.379 5.61426 23.8166 6.11436C24.2542 6.61446 24.5 7.29274 24.5 7.99998V18.6666C24.5 19.3739 24.2542 20.0522 23.8166 20.5523C23.379 21.0524 22.7855 21.3333 22.1667 21.3333H16.3333L10.5 28V21.3333Z"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>

      <router-link to="/input_con" class="su">剧本策划</router-link>
    </div>
    <div class="employee-management2">
      <div class="rectangle-9436"></div>
      <div class="rectangle-9438"></div>
      <div class="chat-12"></div>
      <svg
        class="vector3"
        width="28"
        height="19"
        viewBox="0 0 28 19"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M21.2776 5.33333V2.66667C21.2776 1.95942 20.9677 1.28115 20.416 0.781048C19.8642 0.280951 19.1159 0 18.3357 0H3.62602C2.84577 0 2.09747 0.280951 1.54575 0.781048C0.994035 1.28115 0.684082 1.95942 0.684082 2.66667V10.6667C0.684082 11.3739 0.994035 12.0522 1.54575 12.5523C2.09747 13.0524 2.84577 13.3333 3.62602 13.3333H6.56795M9.50989 18.6667H24.2196C24.9998 18.6667 25.7481 18.3857 26.2998 17.8856C26.8515 17.3855 27.1615 16.7072 27.1615 16V8C27.1615 7.29276 26.8515 6.61448 26.2998 6.11438C25.7481 5.61429 24.9998 5.33333 24.2196 5.33333H9.50989C8.72964 5.33333 7.98135 5.61429 7.42963 6.11438C6.87791 6.61448 6.56795 7.29276 6.56795 8V16C6.56795 16.7072 6.87791 17.3855 7.42963 17.8856C7.98135 18.3857 8.72964 18.6667 9.50989 18.6667ZM19.8067 12C19.8067 12.7072 19.4967 13.3855 18.945 13.8856C18.3933 14.3857 17.645 14.6667 16.8647 14.6667C16.0845 14.6667 15.3362 14.3857 14.7845 13.8856C14.2327 13.3855 13.9228 12.7072 13.9228 12C13.9228 11.2928 14.2327 10.6145 14.7845 10.1144C15.3362 9.61429 16.0845 9.33333 16.8647 9.33333C17.645 9.33333 18.3933 9.61429 18.945 10.1144C19.4967 10.6145 19.8067 11.2928 19.8067 12Z"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>

      <router-link to="/ai_picture" class="su2">分镜头脚本</router-link>
    </div>
    <div class="employee-management3">
      <div class="rectangle-9436"></div>
      <div class="rectangle-9438"></div>
      <svg
        class="frame"
        width="30"
        height="30"
        viewBox="0 0 30 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M6 4.5C5.20435 4.5 4.44129 4.81607 3.87868 5.37868C3.31607 5.94129 3 6.70435 3 7.5V22.5C3 23.2956 3.31607 24.0587 3.87868 24.6213C4.44129 25.1839 5.20435 25.5 6 25.5H24C24.7956 25.5 25.5587 25.1839 26.1213 24.6213C26.6839 24.0587 27 23.2956 27 22.5V7.5C27 6.70435 26.6839 5.94129 26.1213 5.37868C25.5587 4.81607 24.7956 4.5 24 4.5H6ZM24 22.5H6L12 10.5L16.5 19.5L19.5 13.5L24 22.5Z"
          fill="white"
        />
      </svg>

      <router-link to="/ai_picture" class="ai">AI图片</router-link>
    </div>
    <div class="employee-management4">
      <div class="rectangle-9436"></div>
      <div class="rectangle-9438"></div>
      <svg
        class="frame2"
        width="35"
        height="31"
        viewBox="0 0 35 31"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M21.1896 14.4253L16.6338 11.6715C16.419 11.5416 16.1693 11.467 15.9114 11.4558C15.6535 11.4445 15.397 11.497 15.1694 11.6077C14.9419 11.7183 14.7518 11.8829 14.6194 12.0839C14.487 12.2849 14.4174 12.5147 14.418 12.7487V18.2551C14.4179 18.489 14.4879 18.7184 14.6205 18.919C14.7531 19.1196 14.9432 19.2839 15.1707 19.3942C15.3982 19.5045 15.6544 19.5568 15.9121 19.5454C16.1698 19.5341 16.4192 19.4596 16.6338 19.3298L21.1896 16.5759C21.3847 16.458 21.5448 16.2982 21.6554 16.1107C21.7661 15.9232 21.824 15.7139 21.824 15.5013C21.824 15.2886 21.7661 15.0793 21.6554 14.8918C21.5448 14.7044 21.3847 14.5446 21.1896 14.4266V14.4253Z"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M30.0929 15.5C30.0929 17.0266 29.7611 18.5383 29.1166 19.9487C28.4721 21.3591 27.5274 22.6406 26.3365 23.7201C25.1456 24.7996 23.7318 25.6559 22.1758 26.2401C20.6198 26.8243 18.9521 27.125 17.2679 27.125C15.5837 27.125 13.916 26.8243 12.36 26.2401C10.804 25.6559 9.39014 24.7996 8.19923 23.7201C7.00832 22.6406 6.06363 21.3591 5.41912 19.9487C4.7746 18.5383 4.44287 17.0266 4.44287 15.5C4.44287 12.4169 5.79407 9.45999 8.19923 7.27988C10.6044 5.09977 13.8665 3.875 17.2679 3.875C20.6693 3.875 23.9314 5.09977 26.3365 7.27988C28.7417 9.45999 30.0929 12.4169 30.0929 15.5Z"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>

      <router-link to="/ai_video" class="ai2">AI视频</router-link>
    </div>
    <div class="employee-management5">
      <div class="rectangle-9436"></div>
      <div class="rectangle-9438"></div>
      <svg
        class="vector7"
        width="24"
        height="21"
        viewBox="0 0 24 21"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12.0841 2.58333V0M12.0841 2.58333C11.3282 2.58333 10.6033 2.85551 10.0688 3.33997C9.53435 3.82444 9.23408 4.48152 9.23408 5.16667C9.23408 5.85181 9.53435 6.50889 10.0688 6.99336C10.6033 7.47783 11.3282 7.75 12.0841 7.75M12.0841 2.58333C12.8399 2.58333 13.5649 2.85551 14.0993 3.33997C14.6338 3.82444 14.9341 4.48152 14.9341 5.16667C14.9341 5.85181 14.6338 6.50889 14.0993 6.99336C13.5649 7.47783 12.8399 7.75 12.0841 7.75M12.0841 7.75V20.6667M3.53408 18.0833C4.28995 18.0833 5.01486 17.8112 5.54934 17.3267C6.08382 16.8422 6.38408 16.1851 6.38408 15.5C6.38408 14.8149 6.08382 14.1578 5.54934 13.6733C5.01486 13.1888 4.28995 12.9167 3.53408 12.9167M3.53408 18.0833C2.77822 18.0833 2.05331 17.8112 1.51883 17.3267C0.984349 16.8422 0.684082 16.1851 0.684082 15.5C0.684082 14.8149 0.984349 14.1578 1.51883 13.6733C2.05331 13.1888 2.77822 12.9167 3.53408 12.9167M3.53408 18.0833V20.6667M3.53408 12.9167V0M20.6341 18.0833C21.39 18.0833 22.1149 17.8112 22.6493 17.3267C23.1838 16.8422 23.4841 16.1851 23.4841 15.5C23.4841 14.8149 23.1838 14.1578 22.6493 13.6733C22.1149 13.1888 21.39 12.9167 20.6341 12.9167M20.6341 18.0833C19.8782 18.0833 19.1533 17.8112 18.6188 17.3267C18.0844 16.8422 17.7841 16.1851 17.7841 15.5C17.7841 14.8149 18.0844 14.1578 18.6188 13.6733C19.1533 13.1888 19.8782 12.9167 20.6341 12.9167M20.6341 18.0833V20.6667M20.6341 12.9167V0"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>

      <router-link to="/ai_music" class="ai3">AI音乐</router-link>
    </div>
    <div class="employee-management6">
      <div class="rectangle-9436"></div>
      <div class="rectangle-9438"></div>
      <div class="chat-12"></div>
      <svg
        class="user"
        width="30"
        height="30"
        viewBox="0 0 30 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M20 8.75C20 10.0761 19.4732 11.3479 18.5355 12.2855C17.5979 13.2232 16.3261 13.75 15 13.75C13.6739 13.75 12.4021 13.2232 11.4645 12.2855C10.5268 11.3479 10 10.0761 10 8.75C10 7.42392 10.5268 6.15215 11.4645 5.21447C12.4021 4.27678 13.6739 3.75 15 3.75C16.3261 3.75 17.5979 4.27678 18.5355 5.21447C19.4732 6.15215 20 7.42392 20 8.75V8.75ZM15 17.5C12.6794 17.5 10.4538 18.4219 8.81282 20.0628C7.17187 21.7038 6.25 23.9294 6.25 26.25H23.75C23.75 23.9294 22.8281 21.7038 21.1872 20.0628C19.5462 18.4219 17.3206 17.5 15 17.5V17.5Z"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>

      <router-link to="/ai_person" class="ai4">AI数字人</router-link>
    </div>
    <div class="getting-started">开 始 创 作</div>
    <div class="rectangle5"></div>
    <div class="home">Home</div>
    <div class="services2">Support</div>
    <div class="services3">Contact</div>
    <div class="services4">Pricing</div>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 672px;
  top: calc(50% - -351px);
}
.employee-management {
  background: #f5fdff;
  border-radius: 10px;
  width: 171px;
  height: 58px;
  position: absolute;
  left: 421px;
  top: 349px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.rectangle-9436 {
  background: linear-gradient(
    180deg,
    rgba(43, 78, 190, 1) 0%,
    rgba(158, 142, 254, 1) 100%
  );
  width: 4px;
  height: 128px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.rectangle-9438 {
  background: linear-gradient(
    180deg,
    rgba(48, 86, 211, 1) 0%,
    rgba(126, 107, 239, 1) 100%
  );
  border-radius: 6px;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 16px;
  top: 9px;
  box-shadow: 0px 7px 14px 0px rgba(134, 115, 243, 0.2);
}
.chat-1 {
  position: absolute;
  left: 22px;
  top: 13px;
  overflow: visible;
}
.su {
  color: #4f4f4f;
  text-align: left;
  font: 400 16px "Abhaya Libre", sans-serif;
  position: absolute;
  left: 73px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.employee-management2 {
  background: #f5fdff;
  border-radius: 10px;
  width: 171px;
  height: 58px;
  position: absolute;
  left: 635px;
  top: 347px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.chat-12 {
  width: 28px;
  height: 32px;
  position: absolute;
  left: 22px;
  top: 13px;
  overflow: hidden;
}
.vector3 {
  position: absolute;
  left: 23.68px;
  top: 20px;
  overflow: visible;
}
.su2 {
  color: #4f4f4f;
  text-align: left;
  font: 400 16px "Abhaya Libre", sans-serif;
  position: absolute;
  left: 77px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.employee-management3 {
  background: #f5fdff;
  border-radius: 10px;
  width: 171px;
  height: 58px;
  position: absolute;
  left: 421px;
  top: 444px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.frame {
  position: absolute;
  left: 21px;
  top: 13px;
  overflow: visible;
}
.ai {
  color: #4f4f4f;
  text-align: left;
  font: 400 16px "Abhaya Libre", sans-serif;
  position: absolute;
  left: 73px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.employee-management4 {
  background: #f5fdff;
  border-radius: 10px;
  width: 171px;
  height: 58px;
  position: absolute;
  left: 864px;
  top: 347px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.frame2 {
  position: absolute;
  left: 19.17px;
  top: 13px;
  overflow: visible;
}
.ai2 {
  color: #4f4f4f;
  text-align: left;
  font: 400 16px "Abhaya Libre", sans-serif;
  position: absolute;
  left: 82px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.employee-management5 {
  background: #f5fdff;
  border-radius: 10px;
  width: 171px;
  height: 58px;
  position: absolute;
  left: 637px;
  top: 444px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.vector7 {
  position: absolute;
  left: 25.68px;
  top: 19px;
  overflow: visible;
}
.ai3 {
  color: #4f4f4f;
  text-align: left;
  font: 400 16px "Abhaya Libre", sans-serif;
  position: absolute;
  left: 77px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.employee-management6 {
  background: #f5fdff;
  border-radius: 10px;
  width: 171px;
  height: 58px;
  position: absolute;
  left: 864px;
  top: 443px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.user {
  position: absolute;
  left: 22px;
  top: 14px;
  overflow: visible;
}
.ai4 {
  color: #4f4f4f;
  text-align: left;
  font: 400 16px "Abhaya Libre", sans-serif;
  position: absolute;
  left: 74px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.getting-started {
  color: #212b36;
  text-align: left;
  font: 600 40px "Montserrat", sans-serif;
  position: absolute;
  left: 617px;
  top: 254px;
}
.rectangle5 {
  width: 1440px;
  height: 100px;
  position: absolute;
  left: -309px;
  top: 700px;
}
.home {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 557px;
  top: 731px;
  width: 45px;
  height: 19px;
}
.services2 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 732px;
  top: 731px;
  width: 60px;
  height: 19px;
}
.services3 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 829px;
  top: 731px;
  width: 59px;
  height: 19px;
}
.services4 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 642px;
  top: 731px;
  width: 60px;
  height: 19px;
}
</style>
